<template>
    <VEcharts :options="options" styles="width: 100%; height: 30vh" />
</template>
<script>
export default {
    name: "RBT",
    data() {
        return {
            options: {},
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            const colorList = [
                "#91c6ae",
                "#c13933",
                "#304554",
                "#62a0a8",
                "#d38366",
                "#FF8D3A",
            ];
            const nameList = [
                "轮式拖拉机",
                "稻麦收割机",
                "烘干机",
                "插秧机",
                "无人机",
                "其它收割机",
            ];
            const m2R2Data = [
                {
                    value: 335,
                    value1: 234,
                    legendname: nameList[0],
                    name: nameList[0],
                    itemStyle: {
                        color: colorList[0],
                    },
                },
                {
                    value: 310,
                    value1: 314,
                    legendname: nameList[1],
                    name: nameList[1],
                    itemStyle: {
                        color: colorList[1],
                    },
                },
                {
                    value: 234,
                    value1: 235,
                    legendname: nameList[2],
                    name: nameList[2],
                    itemStyle: {
                        color: colorList[2],
                    },
                },
                {
                    value: 154,
                    value1: 213,
                    legendname: nameList[3],
                    name: nameList[3],
                    itemStyle: {
                        color: colorList[3],
                    },
                },
                {
                    value: 335,
                    value1: 321,
                    legendname: colorList[4],
                    name: colorList[4],
                    itemStyle: {
                        color: colorList[4],
                    },
                },
            ];

            this.options = {
                tooltip: {
                    trigger: "item",
                    formatter: function (parms) {
                        var str =
                            parms.seriesName +
                            "</br>" +
                            parms.marker +
                            "" +
                            parms.data.legendname +
                            "</br>" +
                            "当前温度：" +
                            parms.data.value +
                            "</br>" +
                            "目标温度：" +
                            parms.data.value1 +
                            "</br>" +
                            "占比：" +
                            parms.percent +
                            "%";
                        return str;
                    },
                },
                legend: {
                    type: "scroll",
                    orient: "vertical",
                    left: "75%",
                    align: "left",
                    top: "middle",
                    textStyle: {
                        color: "#fff",
                    },
                },
                series: [
                    {
                        name: "全网调控情况",
                        type: "pie",
                        center: ["35%", "50%"],
                        radius: ["35%", "50%"],
                        clockwise: false, //饼图的扇区是否是顺时针排布
                        avoidLabelOverlap: false,
                        itemStyle: {
                            //图形样式
                            normal: {
                                borderColor: "#ffffff",
                                borderWidth: 1,
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                position: "outter",
                                formatter: function (parms) {
                                    return parms.data.legendname;
                                },
                            },
                        },
                        labelLine: {
                            normal: {
                                length: 15,
                                length2: 13,
                                smooth: true,
                            },
                        },
                        data: m2R2Data,
                    },
                ],
            };
        },
    },
};
</script>
